<route lang="json5" type="page" needLogin="false">
{
  style: {
    navigationBarTitleText: '特色民宿',
  },
}
</route>
<template>
  <view class="w-screen overflow-hidden min-h-100vh">
    <view class="bg-#fff">
      <wd-tabs v-model="tab" @click="handleClick">
        <block v-for="(item, index) in tabs" :key="index">
          <wd-tab :title="item.label"></wd-tab>
        </block>
      </wd-tabs>
      <view>
        <AlreadyPublished v-if="homestayStatus == 2" />
        <InReview v-if="homestayStatus == 1" />
        <ReviewRejected v-if="homestayStatus == 3" />
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import AlreadyPublished from '../MyHomestay/AlreadyPublished.vue'
import InReview from '../MyHomestay/InReview.vue'
import ReviewRejected from '../MyHomestay/ReviewRejected.vue'

const tab = ref<number>(0)
const tabs = [{ label: '已发布' }, { label: '审核中' }, { label: '审核驳回' }]
const homestayStatus = ref<number>(2)

// tab
const handleClick = (e) => {
  if (e.index === 0) {
    homestayStatus.value = 2
  } else if (e.index === 1) {
    homestayStatus.value = 1
  } else {
    homestayStatus.value = 3
  }
}
onShow(() => {
  homestayStatus.value = 0
  setTimeout(() => {
    handleClick({ index: tab.value })
  })
})
</script>
<style lang="scss" scoped>
::v-deep.wd-tabs__line {
  display: none;
}
::v-deep.wd-tabs__nav-item.is-active {
  margin-bottom: 8rpx;
  font-weight: normal !important;
  color: #409eff !important;
  border-bottom: 6rpx solid #409eff !important;
}
::v-deep.wd-tabs__nav-item {
  flex-basis: auto !important;
  flex-grow: 0 !important;
  flex-shrink: 1 !important;
  height: 64rpx !important;
  font-size: 32rpx !important;
}
::v-deep.wd-tabs__nav-container {
  justify-content: space-around !important;
}
::v-deep .wd-tag__text {
  display: block !important;
  min-height: 19px;
  line-height: 19px;
  width: 100rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  font-size: 24rpx;
}
</style>
